<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动菜单</title>
    <script>
        function loadCity(){
            let province = document.getElementById("province");
            let city = document.getElementById("city");

            // 定义一个二维数组
            let arr = new Array();
            // 该数组中的每一个元素也是一个下拉列数组
            arr[0] = [new Option("请选择城市","-1")];
            // 如果选择江苏省,则城市加载出:南京、苏州、无锡、泰州、常州、徐州、盐城、连云港、扬州
            arr[1] = [new Option("请选择城市","-1"),new Option("南京","1"),new Option("苏州","2"),new Option("无锡","3"),new Option("泰州","4"),new Option("常州","5"),new Option("徐州","6"),new Option("盐城","7"),new Option("连云港","8"),new Option("扬州","9")];
            // 如果选择安徽省,则城市加载出:合肥、芜湖、滁州、蚌埠、六安、马鞍山
            arr[2] = [new Option("请选择城市","-1"),new Option("合肥","1"),new Option("芜湖","2"),new Option("滁州","3"),new Option("蚌埠","4"),new Option("六安","5"),new Option("马鞍山","6")];
            // 如果选择浙江省,则城市加载出:杭州、宁波、温州、嘉兴、绍兴
            arr[3] = [new Option("请选择城市","-1"),new Option("杭州","1"),new Option("宁波","2"),new Option("温州","3"),new Option("嘉兴","4"),new Option("绍兴","5")];

            // 获取用户当前所选择的省份的选项的索引
            let index = province.selectedIndex;

            // 每次添加城市选项时,清除原来的选项
            city.length = 0;

            // 加载城市下拉列选项
            for(let i = 0; i < arr[index].length; i++){
                city[city.length] = arr[index][i];
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="loadCity()">
    <option value="-1">请选择省份</option>
    <option value="1">江苏省</option>
    <option value="2">安徽省</option>
    <option value="3">浙江省</option>
</select>
<!--
    城市下拉列的数据是根据用户选择的省份的选项而定的,选中了对应省份之后,会自动加载出该省份所对应的城市
    如果选择江苏省,则城市加载出:南京、苏州、无锡、泰州、常州、徐州、盐城、连云港、扬州
    如果选择安徽省,则城市加载出:合肥、芜湖、滁州、蚌埠、六安、马鞍山
    如果选择浙江省,则城市加载出:杭州、宁波、温州、嘉兴、绍兴
-->
<select id="city">
    <option value="-1">请选择城市</option>
</select>
</body>
</html>